<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue'

export default defineComponent({
  name: 'compPageTable',

  setup() {

    const data = reactive({
      propList: [
        {
          prop: "queryConfigList",
          defaultValue: "[]",
          instructions: "查询条件字段配置"
        },
        {
          prop: "tableConfigList",
          defaultValue: "[]",
          instructions: "展示查询结果的表格"
        },
        {
          prop: "defaultPageParam",
          defaultValue: "new PageParam() ",
          instructions: "分页参数（current=1,size=10）"
        },
        {
          prop: "queryParam",
          defaultValue: "",
          instructions: "查询条件对象"
        },
        {
          prop: "rowNumber",
          defaultValue: "3",
          instructions: "每行查询条件展示数量"
        },
        {
          prop: "autoSearch",
          defaultValue: "true",
          instructions: "自动查询,内部查询,需要传入listUrl"
        },
        {
          prop: "listUrl",
          defaultValue: "",
          instructions: "查询地址,autoSearch=true有效"
        },
        {
          prop: "tableData",
          defaultValue: "[]",
          instructions: "外部查询结果,不使用内部查询"
        },
        {
          prop: "total",
          defaultValue: "0",
          instructions: "外部查询总量显示"
        },
        {
          prop: "pageSizes",
          defaultValue: "[5,10,15,20,25]",
          instructions: "每页可选条数"
        },
        {
          prop: "openSelection",
          defaultValue: "true",
          instructions: "是否开启表格选中"
        },
        {
          prop: "changeItemTitle",
          defaultValue: "勾选的数据",
          instructions: "勾选数据的触发传递的按钮title"
        },
        {
          prop: "showButton",
          defaultValue: "true",
          instructions: "是否显示顶部按钮区域(包含添加按钮)"
        },
        {
          prop: "openAdd",
          defaultValue: "true",
          instructions: "是否显示添加按钮"
        },
        {
          prop: "addTitle",
          defaultValue: "添加",
          instructions: "添加按钮的标题"
        }
      ],
      emitMethodList: [
        {
          name: "sizeChange",
          param: "pageParam 分页参数",
          instructions: "当分页size改变的时候触发(外部查询)"
        },
        {
          name: "currentPageChange",
          param: "pageParam 分页参数",
          instructions: "当页数发生变化时触发(外部查询)"
        },
        {
          name: "search",
          param: "queryParam 查询条件",
          instructions: "点击查询的时候触发(外部查询)"
        },
        {
          name: "handleChangeItem",
          param: "changeList 选中的数据列表",
          instructions: "点击勾的数据按钮触发"
        },
        {
          name: "handlerAdd",
          param: "无",
          instructions: "点击添加按钮触发"
        }
      ]
    })

    const methods = {}

    const validators = {}


    const rules = reactive({})

    const refs = {}


    return {
      ...toRefs(data),
      ...methods,
      ...refs,
      validators,
      rules

    }
  }
})
</script>

<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <el-row>
      <el-text style="color:#1677FF">组件props:</el-text>
    </el-row>
    <el-row>
      <div style="display: flex;flex-direction: row;gap: 5px 15px;flex-wrap: wrap;align-items: center;">
        <div v-for="(item,index) in propList" style="width: calc(50% - 10px)" :key="index">
          属性名:{{ item.prop }} 默认值:{{ item.defaultValue || "" }} 说明:{{ item.instructions }}
        </div>
      </div>
    </el-row>

    <el-row>
      <el-text style="color:#1677FF">组件emits:</el-text>
    </el-row>
    <el-row>
      <div style="width:100%;display: flex;flex-direction: row;gap: 5px 15px;flex-wrap: wrap;align-items: center;">
        <div v-for="(item,index) in emitMethodList" style="width: calc(50% - 10px)" :key="index">
          事件名:{{ item.name }} 参数以及类型:{{ item.param || "" }} 说明:{{ item.instructions }}
        </div>
      </div>
    </el-row>
  </div>
</template>

<style scoped>

</style>